<template>
  <div class="agentShop_apply">
    <c-title :hide="false" :text="headTitle"></c-title>
    <template v-if="infoData.status == 0 && !isApplyOpen">
      <div class="image_Banner">
        <img :src="infoData.background" alt="" />
      </div>
      <div class="btn set-pc-style">
        <div class="submitBtn" @click="isStoreOpen">立即开店</div>
      </div>
    </template>
    <div class="statusBox" v-if="infoData.status == 1 || infoData.status == 2">
      <div class="image">
        <img :src="infoData.status == 1 ? imgWaiting : imgFail" alt="" />
      </div>
      <span class="tips">{{ infoData.status == 1 ? "已成功提交申请，审批中" : "您的申请已被驳回" }}</span>
      <div class="statusBtn" @click="confirmBtn">{{ infoData.status == 1 ? "确认" : "修改申请信息" }}</div>
    </div>
    <div v-if="isApplyOpen" style="padding: 0 0.75rem;">
      <div class="head_title">填写店铺信息</div>
      <div class="apply_list">
        <van-cell-group>
          <van-cell required value-class="other_right" title-style="flex:8.5rem 0;">
            <template #title>
              <div class="cellLeft">头像（店铺logo）</div>
            </template>
            <template #default>
              <div class="imgUpload">
                <img :src="avatar" alt="" />
                <div class="posUpload">
                  <van-uploader :after-read="afterRead_t" />
                </div>
              </div>
              <van-icon name="arrow" />
            </template>
          </van-cell>
          <van-cell title="服务会员" required title-class="cellLeft" value-class="other_left" title-style="flex:5.5rem 0;">
            <template #default>
              <span style="color: #000;">{{ form.nickname }}</span>
            </template>
          </van-cell>
          <van-cell title="手机号码" required title-class="cellLeft" value-class="other_left" title-style="flex:5.5rem 0;">
            <template #default>
              <input type="text" v-model="form.mobile" class="inpStyle" placeholder="请输入手机号" />
            </template>
          </van-cell>
          <van-cell title="店铺类型" required title-class="cellLeft" value-class="other_left" title-style="flex:5.5rem 0;">
            <template #default>
              <div style="width: 100%;">
                <van-radio-group v-model="form.shop_type" direction="horizontal">
                  <van-radio name="1" checked-color="#FE5E56">个人店铺</van-radio>
                  <van-radio name="2" checked-color="#FE5E56">企业店铺</van-radio>
                </van-radio-group>
              </div>
            </template>
          </van-cell>
          <van-cell title="店铺名称" required title-class="cellLeft" value-class="other_left" title-style="flex:5.5rem 0;">
            <template #default>
              <span style="color: #000;">{{ form.nickname }}</span>
              <span style="margin-left: 0.3rem;">(开店后可修改)</span>
            </template>
          </van-cell>
          <van-cell title="店铺介绍" title-class="cellLeft" value-class="other_left" title-style="flex:5.5rem 0;">
            <template #default>
              <van-field v-model="form.shop_desc" rows="2" autosize type="textarea" maxlength="20" placeholder="请输入店铺介绍" show-word-limit />
            </template>
          </van-cell>
        </van-cell-group>
      </div>
      <div class="head_title">经营者身份信息</div>
      <div class="apply_list">
        <van-cell-group>
          <van-cell title="身份证正面" required title-class="cellLeft" value-class="other_left" title-style="flex:5.5rem 0;">
            <template #default>
              <div class="uploadBox">
                <template v-if="!form.id_card_font">
                  <van-icon name="plus" />
                  <div class="posUpload">
                    <van-uploader :after-read="afterRead_z" />
                  </div>
                </template>
                <template v-else>
                  <div class="posUpload">
                    <van-uploader :after-read="afterRead_z" />
                  </div>
                  <img :src="id_card_font" alt="" />
                </template>
              </div>
            </template>
          </van-cell>
          <van-cell title="身份证反面" required title-class="cellLeft" value-class="other_left" title-style="flex:5.5rem 0;">
            <template #default>
              <div class="uploadBox">
                <template v-if="!form.id_card_back">
                  <van-icon name="plus" />
                  <div class="posUpload">
                    <van-uploader :after-read="afterRead_f" />
                  </div>
                </template>
                <template v-else>
                  <div class="posUpload">
                    <van-uploader :after-read="afterRead_f" />
                  </div>
                  <img :src="id_card_back" alt="" />
                </template>
              </div>
            </template>
          </van-cell>
          <van-cell title="身份证姓名" required title-class="cellLeft" value-class="other_left" title-style="flex:5.5rem 0;">
            <template #default>
              <input type="text" v-model="form.id_card_name" class="inpStyle" placeholder="请输入身份证姓名" />
            </template>
          </van-cell>
          <van-cell title="身份证号码" required title-class="cellLeft" value-class="other_left" title-style="flex:5.5rem 0;">
            <template #default>
              <input type="text" v-model="form.id_card_number" class="inpStyle" placeholder="请输入身份证号码" />
            </template>
          </van-cell>
          <van-cell title="身份证有效期" required title-class="cellLeft" value-class="other_left" title-style="flex:1 0;">
            <template #default>
              <div style="width: 100%">
                <van-radio-group v-model="form.is_long" direction="horizontal">
                  <van-radio name="0" checked-color="#FE5E56">有效期</van-radio>
                  <van-radio name="1" checked-color="#FE5E56">长期</van-radio>
                </van-radio-group>
              </div>
            </template>
          </van-cell>
          <div class="seleTime">
            <div class="seleTime_start" @click="showTypeBtn(1)">
              {{ form.id_card_start_day ? fun.dateFormat("YYYY/mm/dd", startTime) : "开始时间" }}
              <van-icon name="arrow-down" />
            </div>
            <div class="line"></div>
            <div class="seleTime_start" @click="showTypeBtn(2)">
              {{ form.id_card_end_day ? fun.dateFormat("YYYY/mm/dd", endTime) : form.is_long == "1" ? "长期" : "结束日期" }}
              <van-icon name="arrow-down" v-if="form.is_long != '1'" />
            </div>
          </div>
          <van-cell v-if="form.shop_type == 2" title="商户简称" required title-class="cellLeft" value-class="other_left" title-style="flex:7rem 0;">
            <template #default>
              <input type="text" v-model="form.shop_short_name" class="inpStyle" placeholder="请输入商户简称" />
            </template>
            <template #label>
              <span style="color:#F15353;font-size: 0.69rem;">(认证成功后无法更改)</span>
            </template>
          </van-cell>
        </van-cell-group>
      </div>
      <div class="btn set-pc-style">
        <div class="agreement">
          <van-checkbox v-model="checked"></van-checkbox>
          <div class="txt" @click="toAgreement">
            阅读并同意<span class="dtxt">《{{ infoData.agreement_title }}》</span>
          </div>
        </div>
        <div class="submitBtn" @click="applyPost">提交店铺申请</div>
      </div>
    </div>

    <van-popup v-model="show" position="bottom">
      <van-datetime-picker @cancel="cancel" @confirm="onConfirm" v-model="currentDate" type="date" title="请选择年月日" :min-date="minDate" :max-date="maxDate" />
    </van-popup>
    <van-popup v-model="showAgreement" position="left" :style="{ width: '100%', height: '100vh' }">
      <agreementPage :infoData="infoData" @closePopup="closePopup"></agreementPage>
    </van-popup>
  </div>
</template>
<script>
import agreementPage from "./agreementPage.vue";
export default {
  data() {
    return {
      headTitle: "推客店铺申请",
      showAgreement: false,
      // 时间弹窗开关
      show: false,
      checked: false,

      //1开始时间 2结束时间
      showType: 1,
      startTime: "",
      endTime: "",
      currentDate: new Date(),
      minDate: "",
      maxDate: "",

      // 静态图片
      imgWaiting: "https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/images%2FagentShop%2F%E7%AD%89%E5%BE%85%E5%AE%A1%E6%A0%B8%402x.png",
      imgFail: "https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/images%2FagentShop%2F%E7%AD%89%E5%BE%85%E5%AE%A1%E6%A0%B8%402x%20(1).png",

      // 图片回显
      id_card_font: "",
      id_card_back: "",

      // 提交数据格式
      form: {
        avatar: "",
        nickname: "",
        mobile: "",
        shop_type: "1",
        shop_name: "",
        shop_short_name: "",
        shop_desc: "",
        id_card_name: "",
        id_card_number: "",
        id_card_font: "",
        id_card_back: "",
        id_card_start_day: "",
        id_card_end_day: "",
        is_long: "0"
      },
      avatar:"",
      infoData: {
        // 0 推客店铺图片立即申请 1申请中待审核 2申请被驳回 3已经拥有店铺无需申请
        status: 3
      },
      isApplyOpen: false,
      isclick: false
    };
  },
  components: { agreementPage },
  activated() {
    let year = new Date().getFullYear();
    this.minDate = new Date(year - 90, 1, 1);
    this.maxDate = new Date(year + 90, 1, 1);
    this.getData();
  },
  methods: {
    async applyPost() {
      if (this.fun.isTextEmpty(this.form.shop_name)) {
        this.$toast("请输入店铺名称");
        return;
      }
      if (this.fun.isTextEmpty(this.form.id_card_name)) {
        this.$toast("请输入身份证姓名");
        return;
      }
      if (this.fun.isTextEmpty(this.form.id_card_number)) {
        this.$toast("请输入身份证号码");
        return;
      }
      if (this.fun.isTextEmpty(this.form.id_card_font)) {
        this.$toast("请上传身份证正面图片");
        return;
      }
      if (this.fun.isTextEmpty(this.form.id_card_back)) {
        this.$toast("请上传身份证反面图片");
        return;
      }
      if (this.fun.isTextEmpty(this.form.id_card_start_day)) {
        this.$toast("请选择身份证有效期开始日期");
        return;
      }
      if (this.fun.isTextEmpty(this.form.id_card_end_day) && this.form.is_long != "1") {
        this.$toast("请选择身份证有效期截止日期");
        return;
      }
      if (this.form.shop_type == 2 && this.fun.isTextEmpty(this.form.shop_short_name)) {
        this.$toast("请输入商户简称");
        return;
      }
      if (!this.checked) return this.$toast("请勾选店铺协议");
      if (this.isclick) return;
      this.isclick = true;
      let { data, msg, result } = await $http.post("plugin.agent-shop.frontend.apply.apply", this.form, "");
      if (!result){
        this.isclick = false;
        this.$toast(msg);
        return
      } 
      this.$toast(msg);
      setTimeout(() => {
        this.getData();
        this.isclick = false;
      }, 800);
    },
    closePopup() {
      this.showAgreement = false;
    },
    async getData() {
      let { data, msg, result } = await $http.post("plugin.agent-shop.frontend.apply.index", {}, "");
      console.log(data, msg, result);
      if (!result) return this.$toast(msg);
      this.infoData = data;
      // this.infoData.status = data.status;
      if (!data.shop) {
        this.isApplyOpen = false;
      }
      if (data.member && this.infoData.apply != 2) {
        this.form.avatar = data.member.avatar;
        this.avatar = data.member.avatar_image;
        this.form.nickname = data.member.nickname;
        this.form.shop_name = data.member.nickname;
        this.form.mobile = data.member.mobile;
      }
      if (data.apply && this.infoData.status == 2) {
        this.form.avatar = data.apply.avatar;
        this.avatar = data.apply.avatar_image;
        this.form.id_card_back = data.apply.id_card_back;
        this.id_card_back = data.apply.id_card_back_image;
        this.form.id_card_font = data.apply.id_card_font;
        this.id_card_font = data.apply.id_card_font_image;
        this.form.id_card_name = data.apply.id_card_name;
        this.id_card_number = data.apply.id_card_number;
        this.form.shop_desc = data.apply.shop_desc;
        this.form.id_card_number = data.apply.id_card_number;
        this.form.nickname = data.apply.shop_name;
        this.form.shop_name = data.apply.shop_name;
        this.form.mobile = data.apply.mobile;
        this.form.shop_type = String(data.apply.shop_type);
        if (data.apply.shop_type == "2") {
          this.form.shop_short_name = data.apply.shop_short_name;
        }
        if (data.apply.id_card_start_day) {
          let set = this.setFiltering(data.apply.id_card_start_day);
          this.form.id_card_start_day = data.apply.id_card_start_day;
          this.startTime = new Date(set);
        }
        if (data.apply.id_card_end_day) {
          let set = this.setFiltering(data.apply.id_card_end_day);
          this.form.id_card_end_day = data.apply.id_card_end_day;
          this.endTime = new Date(set);
        }
        this.form.is_long = String(data.apply.is_long);
      }
    },
    setFiltering(str) {
      let year = str.slice(0, 4);
      let month = str.slice(4, 6);
      let day = str.slice(6, 8);
      return year + "-" + month + "-" + day;
    },
    afterRead_t(e){
      this.$toast.loading({
        message: "上传中",
        forbidClick: true
      });
      let fd = new FormData();
      fd.append("file", e.file); // 第一个参数字符串可以填任意命名，第二个根据对象属性来找到file
      this.uploadUrl = this.fun.getRealUrl("upload.uploadPic", {});
      axios
        .post(this.uploadUrl, fd, {
          headers: { "Content-Type": "multipart/form-data" }
        })
        .then(response => {
          this.form.avatar = response.data.data.img;
          this.avatar = response.data.data.img_url;
          this.$toast.clear();
        })
        .catch(error => {
          this.$toast.clear();
          console.log(error);
        });
    },
    afterRead_f(e) {
      this.$toast.loading({
        message: "上传中",
        forbidClick: true
      });
      let fd = new FormData();
      fd.append("file", e.file); // 第一个参数字符串可以填任意命名，第二个根据对象属性来找到file
      this.uploadUrl = this.fun.getRealUrl("upload.uploadPic", {});
      axios
        .post(this.uploadUrl, fd, {
          headers: { "Content-Type": "multipart/form-data" }
        })
        .then(response => {
          this.form.id_card_back = response.data.data.img;
          this.id_card_back = response.data.data.img_url;
          this.$toast.clear();
        })
        .catch(error => {
          this.$toast.clear();
          console.log(error);
        });
    },
    afterRead_z(e) {
      this.$toast.loading({
        message: "上传中",
        forbidClick: true
      });
      let fd = new FormData();
      fd.append("file", e.file); // 第一个参数字符串可以填任意命名，第二个根据对象属性来找到file
      this.uploadUrl = this.fun.getRealUrl("upload.uploadPic", {});
      axios
        .post(this.uploadUrl, fd, {
          headers: { "Content-Type": "multipart/form-data" }
        })
        .then(response => {
          this.$toast.clear();
          this.form.id_card_font = response.data.data.img;
          this.id_card_font = response.data.data.img_url;
        })
        .catch(error => {
          this.$toast.clear();
          console.log(error);
        });
    },
    isStoreOpen() {
      this.isApplyOpen = true;
    },
    async confirmBtn() {
      if (this.infoData.status == 2) {
        this.infoData.status = 0;
        console.log(this.infoData);
        return;
      }
      this.$router.push(this.fun.getUrl("member", {}, {}));
    },
    toAgreement() {
      // this.$router.push(this.fun.getUrl("agreement_page", {}, {}));
      this.showAgreement = true;
    },
    cancel() {
      this.show = false;
    },
    onConfirm(date) {
      this.show = false;
      this.currentDate = date;
      if (this.showType == 1) {
        this.startTime = date;
        this.form.id_card_start_day = this.fun.dateFormat("YYYYmmdd", date);
      } else {
        this.endTime = date;
        this.form.id_card_end_day = this.fun.dateFormat("YYYYmmdd", date);
      }
    },
    showTypeBtn(key) {
      if (this.form.is_long == "1" && key == 2) {
        // 长期不选择结束时间
        return;
      }
      this.show = true;
      this.showType = key;
      this.currentDate = new Date();
    }
  },
  mounted() {}
};
</script>
<style lang="scss" scoped>
.agentShop_apply {
  box-sizing: border-box;
  overflow: hidden;
  padding-bottom: 7.5rem;
  .image_Banner {
    width: 100%;
    img {
      width: 100%;
      height: auto;
    }
  }
  .statusBox {
    width: 21.94rem;
    height: 16.78rem;
    background: #ffffff;
    border-radius: 0.5rem 0.5rem 0.5rem 0.5rem;
    margin: 0.63rem auto;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    .image {
      width: 6.66rem;
      height: 6.66rem;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .tips {
      font-size: 0.88rem;
      color: #00001c;
      text-align: center;
      margin: 0.72rem 0 1.88rem 0;
    }
    .statusBtn {
      width: 6.69rem;
      height: 2.5rem;
      background: #f15353;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 1.25rem;
      font-weight: 500;
      font-size: 0.94rem;
      color: #ffffff;
    }
  }
  .btn {
    position: fixed;
    bottom: 0;
    left: 0;
    padding: 0.63rem 0.75rem;
    background: #fff;
    width: 100%;
    z-index: 19;
    .submitBtn {
      background: #f15353;
      border-radius: 1.88rem;
      text-align: center;
      line-height: 2.5rem;
      color: #fff;
    }
    .agreement {
      display: flex;
      align-items: center;
      padding: 0.63rem 0;
      .txt {
        margin-left: 0.5rem;
        font-size: 0.88rem;
        .dtxt {
          color: #5385d9;
        }
      }
    }
  }
  .posUpload {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    z-index: 9;
  }
  .apply_list {
    margin-top: 0.81rem;
    .uploadBox {
      width: 4.63rem;
      height: 4.63rem;
      background: #f8f8f8;
      border-radius: 0.31rem 0.31rem 0.31rem 0.31rem;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      .van-icon-plus {
        font-size: 1.5rem;
        color: #d6d6dc;
      }

      img {
        width: 100%;
        height: 100%;
        border-radius: 0.31rem;
      }
    }
    .seleTime {
      padding: 10px 16px;
      flex: 1;
      display: flex;
      align-items: center;
      font-size: 0.81rem;
      color: #aaaab3;
      .seleTime_start {
        padding: 0.72rem 0.47rem;
        box-sizing: border-box;
        border-radius: 0.5rem;
        border: 0.03rem solid #d6d6dc;
      }
      .line {
        width: 0.56rem;
        height: 0.13rem;
        background: #d6d6dc;
        margin: 0 0.31rem;
      }
    }
    .inpStyle {
      border: none;
      width: 90%;
    }
    .cellLeft {
      text-align: left;
    }
    .other_left {
      width: 100%;
      display: flex;
      align-items: center;
      .van-cell {
        padding: 0;
      }
    }
    .van-cell__value .van-radio {
      display: flex !important;
    }
    .other_right {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      .imgUpload {
        text-align: right;
        width: 2rem;
        height: 2rem;
        background: #d6d6dc;
        border-radius: 50%;
        margin-right: 0.6rem;
        position: relative;
        img {
          width: 100%;
          height: 100%;
          border-radius: 50%;
        }
      }
    }
  }
  .head_title {
    font-weight: bold;
    font-size: 0.94rem;
    text-align: left;
    margin: 1rem 0;
  }
}
</style>
